<template>
  <div class="app">
    <van-tabbar v-model="active" route v-if="!HideList">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine" v-if="token"
        >我的</van-tabbar-item
      >
      <van-tabbar-item icon="manager-o" to="/login" v-else
        >登录</van-tabbar-item
      >
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hideList: [
        "/mine",
        "/details",
        "/cart",
        "/login",
        "/register",
        "/password",
        "/address",
        "/order",
        "/search",
        "/searchList",
      ],
      active: 0,
    };
  },
  computed: {
    HideList() {
      return this.hideList.includes(this.$route.path);
    },
    token() {
      return this.$store.state.token;
    },
  },
};
</script>

<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  background-color: rgb(246, 246, 246);
}
</style>
